<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 品牌名称：</p>
        <el-input v-model="queryParams.name" placeholder="请输入品牌名称"></el-input>
      </el-col>
      <el-col :span="4">
        <p class="label-form"> 状态：</p>
        <el-select style="width: 100%;" clearable v-model="queryParams.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 10px">
      <el-col :span="4">
        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData"  border style="margin-top: 30px">
      <el-table-column prop="name" min-width="200" label="品牌名称"></el-table-column>
      <el-table-column prop="logo" min-width="200"  label="品牌图片">
        <template slot-scope="scope">
          <el-image style="height: 30px;object-fit: contain" :src="scope.row.logo"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="description" min-width="200"  label="品牌描述 "></el-table-column>
      <el-table-column min-width="150"  prop="status" label="状态">
        <template slot-scope="scope">
          {{ status(scope.row.status) || '暂无' }}
        </template>
      </el-table-column>
      <el-table-column min-width="150"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) || '暂无时间' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="300" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateShop(scope.row)">修改</el-button>
          <el-button type="primary" size="mini" icon="el-icon-view" @click="viewShop(scope.row)">查看</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete"  @click="deleteForm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="isEdit ? '修改-品牌管理':'品牌管理'"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="品牌名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌图片">
          <lz-upload :limit="1" :img-src="form.logo" @uploadImage="uploadImage"></lz-upload>
        </el-form-item>
        <el-form-item label="品牌描述">
          <el-input type="textarea" :rows="5" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1" value="1">启用</el-radio>
            <el-radio :label="0" value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="isEdit || isAdd" @click="cancel">取消</el-button>
        <el-button v-if="isEdit && !isAdd" type="primary" @click="updateForm">立即修改</el-button>
        <el-button v-if="!isEdit && isAdd" type="primary" @click="submitAdd">提交</el-button>
        <el-button v-if="!isEdit && !isAdd" type="primary" @click="cancel">关闭</el-button>
      </span>
    </el-dialog>


    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>
  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {addNewBrand, changeBrand, deleteBrand, getStoreArray, obtainBrand} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {},
      form: {},
      queryParams:{
        pageNum:1,
        pageSize:10,
        name:"",
        status:""
      },
      dialogVisible: false,
      isEdit: false,
      isAdd:false,
      center: {lng: 117.404, lat: 35.915},
      mark: {lng: '', lat: ''},
      content:"",
      tableData: [],
      options: [
        {value: "", label: '全部'},
        {value: 2, label: '禁用'},
        {value: 1, label: '启用'},
      ],
      optionsBrand:[],
      value: ''
    }
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  methods: {
    parseTime,
    cancel(){
      this.form={}
      this.isAdd=false
      this.isEdit=false
      this.getLists(this.queryParams)
      this.dialogVisible=false
    },

    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        name:"",
        status:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },

    uploadImage(e){
      this.form.logo= e
    },

    submitAdd(){
      if (!this.form.name){
        this.$message.error('品牌名称必填')
        return
      }
      if (!this.form.logo){
        this.$message.error('品牌图片必填')
        return
      }
      if (!this.form.description){
        this.$message.error('品牌描述必填')
        return
      }
      addNewBrand(this.form).then(res=>{
        this.$message.success('新增成功')
        this.cancel()
      })
    },
    updateForm(){
      changeBrand(this.form).then(res=>{
        this.$message.success('修改成功')
        this.cancel()
      })
    },

    deleteForm(item){
      deleteBrand(item.id).then(res=>{
        this.$message.success('删除成功')
        this.getLists(this.queryParams)
      })
    },


    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    getLists(params) {
      obtainBrand(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },
    setMark(e) {
      console.log(e)
      this.mark = {lng: e.point.lng, lat: e.point.lat}
      this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.form.logo = ""
      this.form.status = 1
      this.isEdit = false
      this.isAdd = true
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 2: {
          return '禁用'
        }
        case 1: {
          return '启用'
        }
      }
    },

  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
